﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <meta charset="utf-8" />
    <title>迷糊虫的工具箱</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./static/css/fly/global.css" />
    <link rel="stylesheet" type="text/css" href="./static/css/global.css" />
    <style>
        .fly-extend-list {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="layui-header header header-extends" style="background-color: #24262F;">
        <div class="layui-container">
            <a class="fly-logo" href="/tools">迷糊虫的工具箱</a>
            <div class="layui-form component" lay-filter="LAY-site-header-component">
            </div>
            <ul class="layui-nav tools-nav" lay-filter="tools-nav">
            </ul>
        </div>
    </div>
    <div class="layui-container" style="min-height: calc(100vh - 250px);">
        <div class="layui-tab layui-tab-brief tools-container" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">

            </div>
        </div>
    </div>
    <script src="./static/js/jquery/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="./static/js/main.js"></script>
    <script src="./static/js/clipboard/clipboard.min.js"></script>
    <script>

        layui.use(['element', 'form'], function () {
            var element = layui.element,
                form = layui.form;
            var toolsnavsInter = setInterval(function () {
                if (layui.toolsnavs) {
                    clearInterval(toolsnavsInter)
                    var navs = layui.toolsnavs;
                    $('.tools-container').children('.layui-tab-title').html('');
                    $('.tools-container').children('.layui-tab-content').html('');
                    for (var i = 0; i < navs.length; i++) {
                        var aa = '<li class="layui-nav-item"><a href="' + (navs[i].src ? navs[i].src : 'javascript:;') + '">' + navs[i].title + '</a>';
                        if (navs[i].children) {
                            aa += '<dl class="layui-nav-child">';
                            for (var j = 0; j < navs[i].children.length; j++) {
                                aa += '<dd><a href="' + (navs[i].children[j].src ? navs[i].children[j].src : 'javascript:;') + '">' + navs[i].children[j].title + '</a></dd> ';
                            }
                            aa += '</dl>';
                        }
                        aa += '</li>'

                        var title_html = '<li class="' + (i == 0 ? 'layui-this' : '') + '" name="tools">' + navs[i].title + '</li>';
                        $('.tools-container').children('.layui-tab-title').append(title_html);

                        var content_html = [
                            '<div class="layui-tab-item ' + (i == 0 ? 'layui-show' : '') + '">'
                        ];
                        if (navs[i].children) {
                            for (var j = 0; j < navs[i].children.length; j++) {
                                aa += '<dd><a href="' + (navs[i].children[j].src ? navs[i].children[j].src : 'javascript:;') + '">' + navs[i].children[j].title + '</a></dd> ';
                                var content_item_html = [
                                    '<div class="layui-col-sm12 layui-col-md3">                                                ',
                                    '    <a href="' + (navs[i].children[j].src ? navs[i].children[j].src : 'javascript:;') + '">                                                      ',
                                    '        <div class="fly-extend-list layui-card">                                          ',
                                    '            <div class="fly-extend-list-header">                                          ',
                                    '                <h2 class="fly-extend-title layui-elip">                                  ',
                                    '                    <span>' + navs[i].children[j].title + '</span>                                                  ',
                                    '                    <span class="layui-badge layui-bg-green layui-hide-xs">' + navs[i].children[j].tag + '</span>',
                                    '                </h2>                                                                      ',
                                    '            </div>                                                                          ',
                                    '            <p class="fly-extend-list-desc">' + navs[i].children[j].describe + '</p>                                     ',
                                    '        </div>                                                                              ',
                                    '    </a>                                                                                    ',
                                    '</div>                                                                                      '
                                ]
                                content_html.push(content_item_html.join(''))
                            }
                        }
                        content_html.push('</div>')
                        $('.tools-container').children('.layui-tab-content').append(content_html.join(''));
                    }
                    element.render('tab');
                }
            })

        })

    </script>
</body>
</html>
